<template>
  <el-drawer
    :append-to-body="true"
    :size="size"
    title="我是标题"
    :visible="show"
    @close="handleClose"
    :with-header="false"
  >
    <div class="drawer-content">
      <div class="flexBet fileline">
        <div style="width: 80%" v-if="type!=2">
          <el-cascader v-model="indexId" :options="courseIndexTree" filterable clearable
                       ref="cascader"
                       :props="{emitPath: false, value: 'id', label: 'name' }" @change="handleChange"
          >
          </el-cascader>
        </div>
        <div class="flex">

          <el-link
            style="margin-left: -20px; margin-right: 8px"
            @click="switchFullShow"
            :underline="false"
            type="primary"
          >
            <i :class="fullShow ? 'el-icon-right' : 'el-icon-back'"></i>
            {{ fullShow ? '取消全屏' : '全屏' }}
          </el-link>
        </div>
      </div>
      <div class="centerContent">
        <!--    内容详情-->
        <div v-if="type === 0">
          <!-- 任务 -->
          <div class="box">
            <courseTeachDetail v-if="selectedType == 3 || selectedType == 4" :selectedContentId="indexId"
                               :courseId="courseId"
            >
            </courseTeachDetail>
            <el-empty v-else style="margin-top: 80px" description="暂无信息~"></el-empty>
          </div>
        </div>
        <!--    数据分析-->
        <div v-if="type === 1" v-loading="chartloading">
          <div class="DataBoxs">
            <div class="box_item">
              <div class="item_label">
                <div class="border_l"></div>
                <div>内容完成情况</div>

              </div>
              <div class="item_value">{{ finishPercent? finishPercent.toFixed(2) : 0 }}<span>%</span></div>
            </div>
            <div class="box_item">
              <div class="item_label">
                <div class="border_l"></div>
                <div>班级考核平均分</div>
              </div>
              <div class="item_value">{{ classAvgScore? classAvgScore.toFixed(2):0}}</div>
            </div>
          </div>
          <div class="ScoreBox">
            <div class="ScoreTitle">分数分布情况</div>
            <div class="ChartsBox">
              <!--              <div class="scoreLine" ref="scoreLine"></div>-->
              <div class="scorePie" ref="scorePie"></div>
            </div>
          </div>
          <div class="AttainmentBox" v-if="abilityDistribution&&(radarData&&radarData.length!=0)">
            <div class="ScoreTitle">能力素养情况</div>
            <div class="ChartsBox" >
              <div class="Attainment_item" v-for="(item,index) in radarData" :key="index">
                <div class="Attainment_title">
                  <div class="border_l"></div>
                  <div>{{ item.categoryName }}</div>
                </div>
                <div class="TunderChart" :ref="`generalChart_${index}`"></div>
              </div>
            </div>
          </div>
          <div class="rankBox">
            <div class="box_Title" v-if="(topStudentList&&topStudentList.length!=0)||( topGroupList&&topGroupList.length!=0)||(topStudentInGroup&&topStudentInGroup.length!=0)">学霸榜</div>
            <div class="rankList">
              <div class="rank_l" v-if="topStudentList&&topStudentList.length!=0">
                <div class="item_title">
                  <div class="title_icon"><img src="@/assets/images/studyRankicon.png"/></div>
                  <div>学霸榜单</div>
                </div>
                <div class="list_box">
                  <div class="list_item" v-for="(item,index) in topStudentList" :key="index">
                    <div class="num">{{ item.scoreRank }}</div>
                    <div class="student_name">{{ item.studentName }}</div>
                    <div class="score">{{ item.score }}分</div>
                  </div>
                </div>
              </div>
              <div class="rank_r" v-if="includeGroupExam">
                <div class="rank_item" v-if=" topGroupList && topGroupList.length!=0">
                  <div class="item_title">
                    <div class="title_icon"><img src="@/assets/images/grouprankicon.png"/></div>
                    <div>学霸小组</div>
                  </div>
                  <div class="list_box">
                    <div class="list_item" v-for="(item,index) in topGroupList" :key="index">
                      <div class="num">{{ item.scoreRank }}</div>
                      <div class="student_name">{{ item.groupName }}</div>
                      <div class="score">{{ item.avgScore }}分</div>
                    </div>
                  </div>
                </div>
                <div class="rank_item" v-if="topStudentInGroup&&topStudentInGroup.length!=0">
                  <div class="item_title">
                    <div class="title_icon"><img src="@/assets/images/grouprankicon.png"/></div>
                    <div>组内学霸</div>
                  </div>
                  <div class="list_box">
                    <div class="list_item" v-for="(item,index) in topStudentInGroup" :key="index">
                      <div class="num">{{ item.scoreRank }}</div>
                      <div class="student_name">{{ item.groupName }}</div>
                      <div class="score"><span>{{ item.studentName }}</span><span>{{ item.score }}分</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--    倒计时-->
        <div v-if="type === 2">
          <div class="cut-title">倒计时</div>

        </div>
      </div>
      <div class="drawer-footer">
        <el-button type="primary" @click="handleClose" size="small">关闭</el-button>
      </div>
    </div>

  </el-drawer>
</template>
<script>

import { returnIcon } from '@/utils/util'
import courseTeachDetail from '@/views/tea_course/components/courseTeachDetail.vue'
import { getCourseIndexTree } from '@/api/course/course'
import { getdataOverview } from '@/api/CourseTeach/index'
import * as echarts from 'echarts'

export default {
  name: 'TeachDrawer',
  components: { courseTeachDetail },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 0:内容详情,1:数据分析
    type: {
      type: Number,
      default: 0
    },
    selectedType: {
      type: Number,
      default: void 0
    },
    selectedId: {
      type: Number,
      default: void 0
    },
    courseId: {
      type: Number,
      default: void 0
    },
    courseSchedulingId: {
      type: Number,
      default: void 0
    },
    includeGroupExam: {
      type: Number,
      default: void 0
    }
  },
  data() {
    return {
      size: '680px',
      fullShow: false,
      returnIcon: function(url, type) {
        return returnIcon(url, type)
      },
      courseIndexTree: [],
      indexId: void 0,
      scoreLine: void 0,
      scorePie: void 0,
      generalChart: void 0,
      majorChart: void 0,
      jobChart: void 0,
      politicsChart: void 0,
      finishPercent: void 0,
      classAvgScore: void 0,
      abilityDistribution: false,
      radarData: [],
      topStudentList: [],
      topGroupList: [],
      topStudentInGroup: [],
      chartloading:true

    }
  },
  watch: {
    selectedId: {
      handler(newValue, oldValue) {
        console.log(newValue,oldValue, 'newValue')
        if(newValue){
          this.indexId = newValue
        }else{
          this.indexId = oldValue
        }
      },
      immediate: true
    },
    show: {
      handler(newValue, oldValue) {
        if ((this.type == 1 || this.type == 0) && newValue) {
          setTimeout(() => {
            this.refreshCategoryTree(this.courseId)
          }, 500)
        }
        if (this.type == 1 && newValue) {
          this.chartloading=true
          setTimeout(() => {
            this.getDataview()
            this.chartloading=false
          }, 1000)
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:show', false)

    },
    switchFullShow() {
      this.fullShow = !this.fullShow
      if (this.fullShow) {
        this.size = '100%'
      } else {
        this.size = '680px'
      }
    },
    async refreshCategoryTree(id) {
      let res = await getCourseIndexTree(id)
      const { code, data } = res
      if (code == 200) {
        this.courseIndexTree = data.children
        console.log(this.courseIndexTree, 'klklklklklklklk')
      }
    },
    handleChange(value) {
      if (value) {
        // this.$emit('update:selectedId', value[value.length - 1])
        this.indexId = value
          this.getDataview()
      }
    },
    async getDataview() {
      let res = await getdataOverview(this.courseSchedulingId, this.indexId)
      let { code, data } = res
      if (code == 200) {
        this.finishPercent = data.finishPercent
        this.classAvgScore = data.classAvgScore
        let scoreList = Object.keys(data.scoreDistribution)
        console.log(scoreList, 'scoreList')
        let studentNum = Object.values(data.scoreDistribution)
        this.setScorePie(scoreList, studentNum)
        if (data.abilityDistribution) {
          this.abilityDistribution = true
          this.radarData = data.abilityDistribution
          if(this.radarData.length!=0){
            this.radarData.forEach((item,index)=>{
              let nameArr=item.paramList.map(item=>item.name)
              let scoreArr=item.paramList.map(item=>item.score)
              this.$nextTick(() => {
                this.setTunderChart(nameArr,scoreArr,this.$refs[`generalChart_${index}`][0],item.categoryName)
              })

            })
          }
        } else {
          this.abilityDistribution = false
        }
        this.topStudentList = data.topStudentList
        this.topGroupList = data.topGroupList
        this.topStudentInGroup = data.topStudentInGroup

      }

    },
    // setScoreLine() {
    //   const dataX = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
    //   const y = [40, 58, 40, 44, 61, 58, 77, 60, 78, 53, 70, 53]
    //   const y1 = [50, 48, 44, 62, 41, 78, 57, 70, 68, 93, 60, 73]
    //   let option = {
    //     tooltip: {
    //       trigger: 'axis',
    //       backgroundColor: 'rgba(33,56,77,1)',
    //       borderColor: 'rgba(33,56,77,1)',
    //       textStyle: {
    //         color: '#fff',
    //         fontSize: 14
    //       },
    //       axisPointer: {
    //         lineStyle: {
    //           color: 'rgba(19,255,241,1)',
    //           type: 'dashed',
    //           width: 2
    //         }
    //       }
    //     },
    //     legend: {
    //       right: 'center',
    //       top: '5%',
    //       itemWidth: 16,
    //       itemHeight: 16,
    //       itemGap: 25,
    //       icon: 'stack',
    //       textStyle: {
    //         color: '#E1E5E6'
    //       }
    //     },
    //     grid: {
    //       top: '16%',
    //       right: '4%',
    //       bottom: '4%',
    //       left: '6%',
    //       containLabel: true
    //     },
    //     xAxis: {
    //       data: dataX,
    //       type: 'category',
    //       boundaryGap: true,
    //       axisLabel: {
    //         textStyle: {
    //           color: '#B5C5D4',
    //           fontSize: 12
    //         }
    //       },
    //       axisLine: {
    //         show: false
    //       },
    //       axisTick: {
    //         show: false // 去除刻度线
    //       }
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisTick: { show: false },
    //       axisLine: {
    //         show: false
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: '#B5C5D4',
    //           fontSize: 12
    //         }
    //       },
    //       // y轴分割线的颜色
    //       splitLine: {
    //         lineStyle: {
    //           color: '#9EA6B4',
    //           type: 'solid'
    //         }
    //       }
    //     },
    //     series: [
    //       {
    //         name: '总流量',
    //         smooth: true,
    //         type: 'line',
    //         // 填充颜色设置
    //         areaStyle: {
    //           color: new echarts.graphic.LinearGradient(
    //               0,
    //               0,
    //               0,
    //               1,
    //               [
    //                 {
    //                   offset: 0,
    //                   color: 'rgba(253, 190, 93,.4)' // 渐变色的起始颜色
    //                 },
    //                 {
    //                   offset: 0.9,
    //                   color: 'rgba(253, 190, 93,0)' // 渐变线的结束颜色
    //                 }
    //               ],
    //               false
    //           ),
    //           shadowColor: 'rgba(0, 0, 0, 0.1)'
    //         },
    //         // 开始不显示拐点， 鼠标经过显示
    //         showSymbol: false,
    //         symbolSize: 8,
    //         // 设置拐点颜色以及边框
    //         itemStyle: {
    //           color: 'rgba(253, 190, 93, 1)'
    //         },
    //         data: y1
    //       },
    //       {
    //         name: '进园',
    //         smooth: true,
    //         type: 'line',
    //         // 填充颜色设置
    //         areaStyle: {
    //           color: new echarts.graphic.LinearGradient(
    //               0,
    //               0,
    //               0,
    //               1,
    //               [
    //                 {
    //                   offset: 0,
    //                   color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
    //                 },
    //                 {
    //                   offset: 0.9,
    //                   color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
    //                 }
    //               ],
    //               false
    //           ),
    //           shadowColor: 'rgba(0, 0, 0, 0.1)'
    //         },
    //         // 开始不显示拐点， 鼠标经过显示
    //         showSymbol: false,
    //         symbolSize: 4,
    //         // 设置拐点颜色以及边框
    //         itemStyle: {
    //           // color: "rgba(241,162,42,1)",
    //           color: 'rgba(26, 119, 221, 1)'
    //         },
    //         data: y
    //       }
    //     ]
    //   }
    //   this.scoreLine = echarts.init(this.$refs.scoreLine)
    //   this.scoreLine.setOption(option)
    // },
    setScorePie(scoreList, studentNum) {
      let option = {
        backgroundColor: '#ffffff',
        color: ['#5d86e5', '#aed1f7', '#c3dcf8', '#e4f1fc', '#b4c9ef'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: scoreList,
          axisLine: {
            lineStyle: {
              color: '#d2e0f4'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#7a869a',
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#e6effc'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#7a869a'
          }
        },
        series: [
          {
            data: studentNum,
            type: 'bar',
            itemStyle: {
              borderRadius: [4, 4, 0, 0]
            }
          }
        ]
      }

      this.scorePie = echarts.init(this.$refs.scorePie)
      this.scorePie.setOption(option)
    },
    setTunderChart(nameArr,scoreArr,chart,categoryName) {
      let nameList = nameArr // 名字
      let valueList =scoreArr // 分数,最大值为100

      let indicatorList = []
      nameList.map((item, index) => {
        indicatorList.push({
          name: item,
          value: valueList[index],
          max: 100
        })
      })
      let option = {
        radar: {
          // shape: 'circle',
          indicator: indicatorList,
          axisName: {
            formatter: function(value, indicator) {
              return `${value}`
            },
            rich: {
              a: {
                fontSize: '14px',
                fontFamily: ' Source Han Sans CN-Regular',
                fontWeight: 400,
                color: '#333333',
                padding: [0, 8, 0, 0]
              },
              b: {
                padding: [4, 8, 4, 8],
                backgroundColor: 'rgba(229, 243, 255, 0.6500)',
                borderRadius: 50,
                fontFamily: 'Source Han Sans CN-Medium',
                fontWeight: 500,
                color: '#397EF0'
              }
            }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '雷达图',
            type: 'radar',
            color: 'rgba(57, 126, 240, 1)',
            label: {
              show: false
            },
            areaStyle: {
              color: 'rgba(170, 217, 255, 0.35)'
            },
            data: [
              {
                value: valueList,
                name: categoryName
              }
            ]
          }
        ]
      }

      let myCharts = echarts.init(chart);
      myCharts.setOption(option)
    },


  }
}


</script>


<style scoped lang="scss">
::v-deep .el-cascader {
  width: 100%;
}

.drawer-content {
  width: 100%;
  min-width: 680px;
  max-width: 1250px;
  margin: 0 auto;
  height: 100vh !important;
  padding: 0 0 20px;
  box-sizing: border-box;
  position: relative;

  .fileline {
    padding: 12px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #EBEBEB;

    img {
      width: 27px;
      height: 32px;
    }

    .filename {
      margin-left: 18px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 32px;
      width: 333px;
    }
  }

  .centerContent {
    width: 100%;
    height: calc(100% - 110px);
    overflow: auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .drawer-footer {
    width: calc(100% - 40px);
    text-align: right;
    position: absolute;
    bottom: 20px;
    right: 20px;
    left: 20px;
  }

  .DataBoxs {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .box_item {
      width: 320px;
      height: 160px;
      border-radius: 8px;
      background-image: url('../../assets/images/dataBg.png');
      background-size: cover;
      background-repeat: no-repeat;
      padding: 16px 12px;
      box-sizing: border-box;
    }

    .box_item:first-child {
      margin-right: 16px;
    }

    .item_label {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      margin-bottom: 12px;

      .border_l {
        width: 6px;
        height: 20px;
        background: #28B28B;
        border-radius: 1px;
        margin-right: 10px;

      }
    }

    .item_value {
      width: 100%;
      text-align: center;
      font-weight: 500;
      line-height: 84px;
      font-size: 60px;
      color: #28B28B;

      span {
        font-weight: 500;
        font-size: 24px;
        color: #333333;
        line-height: 33px;
        margin-left: 6px;
      }
    }
  }


  .ScoreBox {
    width: 100%;
    margin-top: 16px;

    .ScoreTitle {
      margin-bottom: 43px;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
    }

    .ChartsBox {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .scoreLine {
        flex-shrink: 0;
        width: 592px;
        height: 220px;
        margin-bottom: 28px;
      }

      .scorePie {
        flex-shrink: 0;
        width: 576px;
        height: 247px;
      }

    }

  }

  .AttainmentBox {
    width: 100%;
    margin-top: 28px;

    .ScoreTitle {
      margin-bottom: 23px;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
    }

    .ChartsBox {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .Attainment_item {
        width: 550px;
        height: 390px;
        margin-bottom: 20px;
        padding: 16px 12px;
        box-sizing: border-box;

        .Attainment_title {
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          line-height: 22px;
          display: flex;
          align-items: center;
          margin-bottom: 30px;

          .border_l {
            width: 6px;
            height: 20px;
            background: #28B28B;
            border-radius: 1px;
            margin-right: 10px;
          }
        }

        .TunderChart {
          width: 100%;
          height: 280px;
        }
      }

      .Attainment_item:nth-child(2n-1) {
        margin-right: 100px;
      }
    }
  }

  .rankBox {
    width: 100%;

  }

  .box_Title {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    margin-bottom: 43px;
  }

  .rankList {
    width: 100%;
    min-height: 574px;
    height: 100%;
    padding-right: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    position: relative;

    .item_title {
      width: 100%;
      padding: 16px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      line-height: 18px;
      border-bottom: 1px solid #DAE1FA;
    }

    .title_icon {
      width: 24px;
      height: 24px;
      margin-right: 8px;

      img {
        width: 100%;
        height: 100%;
      }

    }

    .rank_l {
      width: 260px;
      min-height: 574px;
      height: 100%;
      background: #F5F7FF;
      border-radius: 12px;
      border: 1px solid #DAE1FA;
      margin-right: 16px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      .list_box {
        width: 100%;
        padding: 16px 20px;
        box-sizing: border-box;

        .list_item {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          font-weight: 400;
          font-size: 16px;
          color: #666666;
          line-height: 22px;

          .num {
            width: 20px;
            text-align: right;
            margin-right: 12px;
          }

          .student_name {
            width: 124px;
            text-align: left;
            margin-right: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .score {
            width: 80px;
            text-align: left;
          }
        }

      }
    }

    .rank_r {
      width: calc(100% - 276px);
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      position: relative;
      top: 0;
      left: 276px;

      .rank_item {
        width: 344px;
        min-height: 279px;
        flex-shrink: 0;
        border: 1px solid #DAE1FA;
        background: #F5F7FF;
        border-radius: 12px;
        margin-right: 16px;
        margin-bottom: 16px;

        .list_box {
          width: 100%;
          padding: 16px 20px;
          box-sizing: border-box;

          .list_item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            line-height: 22px;

            .num {
              width: 20px;
              text-align: right;
              margin-right: 12px;
            }

            .student_name {
              width: 100px;
              text-align: left;
              margin-right: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .score {
              //width: calc(100% - 40px - 32px - 112px);
              text-align: left;

              span {
                display: inline-block;
              }

              span:first-child {
                margin-right: 10px;
              }
            }
          }

        }
      }
      .rank_item:last-child {
        margin-bottom: 0;
      }

    }

  }
  .cut-title{
    width: 100%;
    text-align: center;
    font-weight: 500;
    font-size: 30px;
    margin-top: 50px;
    color: #333333;
  }

}
</style>
